<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>表格添加、删除</title>
   <script>
    window.onload=function(){
	     var oTab=document.getElementById("tab1");
	     var oBtn=document.getElementById("btn1");
         var oName=document.getElementById("name");
		 var oAgr=document.getElementById("age");
		 var id=oTab.tBodies[0].rows.length+1;
		 
		 oBtn.onclick=function(){
		    var oTr=document.createElement("tr");
			//加入ID
		    var oTd=document.createElement("td");
		    oTd.innerHTML=id++;
			oTr.appendChild(oTd);
			//加入姓名
			var oTd=document.createElement("td");
		    oTd.innerHTML=oName.value;
			oTr.appendChild(oTd);
			//加入年龄
			var oTd=document.createElement("td");
		    oTd.innerHTML=oAgr.value;
			oTr.appendChild(oTd);
			//加入操作
			var oTd=document.createElement("td");
		    oTd.innerHTML='<a href="javascript:;">删除</a>';
			oTr.appendChild(oTd);
			oTd.getElementsByTagName("a")[0].onclick=function(){
			   oTab.tBodies[0].removeChild(this.parentNode.parentNode);			
			};				
			oTab.tBodies[0].appendChild(oTr);
		 };
		 //隔行变色
		var oldColor="";
	  //  alert(oTab.tBodies[0].rows[1].cells[0].innerHTML);
        for(var i=0;i<oTab.tBodies[0].rows.length;i++){
		
		    oTab.tBodies[0].rows[i].onmouseover=function(){
			   oldColor=this.style.background;
			   this.style.background="blue";
			};
            oTab.tBodies[0].rows[i].onmouseout=function(){
			   this.style.background=oldColor;
			};			
		    if(i%2){
			  oTab.tBodies[0].rows[i].style.background="";			
			}else{
			   oTab.tBodies[0].rows[i].style.background="green";
			}		
		}

	};
   </script>
</head>
<body>
姓名：<input id="name" type="text"/>
年龄：<input id="age" type="text"/>
<input id="btn1" value="添加" type="button"/>
   <table id="tab1" border="1" width="500">
     <thead>
	    <td>ID</td>
	    <td>姓名</td>
	    <td>年龄</td>
		<td>操作</td>
     </thead>
	   <tr><td>1</td><td>Blue</td><td>23</td><td></td></tr>
	   <tr><td>2</td><td>Blue</td><td>23</td><td></td></tr>
	   <tr><td>3</td><td>Blue</td><td>23</td><td></td></tr>
	   <tr><td>4</td><td>Blue</td><td>23</td><td></td></tr>
	   <tr><td>5</td><td>Blue</td><td>23</td><td></td></tr>
	 <tbody>
     </tbody>
   </table>


</body>
</html>